<template>
    <mt-tabbar class='f-pf' v-model="index">
      <!--<mt-tab-item  v-for="(item,index) in imgUrl" :key="index" @click.native.prevent="isAct(index,item.link)" :class="{'is-selected':$route.meta.index===index}">
        <img slot="icon" :src="$route.meta.index === index?item.aurl:item.durl">
        {{item.title}}
      </mt-tab-item>-->
        <mt-tab-item @click.native="link('/')" :class="{'is-selected':$route.meta.index===0}">
            <img slot="icon" src="../assets/i1_1.png" v-if="$route.meta.index === 0">
            <img slot="icon" src="../assets/i1.png" v-else>
            首页
        </mt-tab-item>
        <mt-tab-item @click.native="link('/classify/0')" :class="{'is-selected':$route.meta.index===1}">
            <img slot="icon" src="../assets/i3_3.png" v-if="$route.meta.index === 1">
            <img slot="icon" src="../assets/i3.png" v-else>
            分类
        </mt-tab-item>
        <mt-tab-item @click.native="link('/ranking')" :class="{'is-selected':$route.meta.index===2}">
            <img slot="icon" src="../assets/i4_4.png" v-if="$route.meta.index === 2">
            <img slot="icon" src="../assets/i4.png" v-else>
            排行榜
        </mt-tab-item>
    </mt-tabbar>
    <!--<router-link to="/download" class='f-pf download f-w100 bg-w' v-else><mt-button size="large">立即下载</mt-button></router-link>
  </div>-->
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {
      index:0,
      imgUrl:[
        {title:'首页',link:'/',aurl:'../assets/i1_1.png',durl:'../assets/i1.png'},
        //{title:'开局号',link:'/game',aurl:'../assets/i2_2.png',durl:'../assets/i2.png'},
        {title:'分类',link:'/classify/0',aurl:'../assets/i3_3.png',durl:'../assets/i3.png'},
        {title:'排行榜',link:'/ranking',aurl:'../assets/i4_4.png',durl:'../assets/i4.png'}
      ]
    }
  },
  methods: {
    link (url){
      //this.index=id;
      this.$router.push(url);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.download{
  display: flex;
  bottom:0;    
  border-top: 1px solid #ececec;
  padding: .185185rem;
}
.download button{
  color: #21201d;
  background: #ffc904;
}
.mint-tabbar{
  background-image: none;
  background-color: #fff;
  z-index: 100;
  a{
    color:#21201d;
  }
  img{
      background-color: transparent;
  }
}
.mint-tabbar > .mint-tab-item.is-selected{
  background-color: transparent;
  color: #21201d;
}
</style>
